<template>
  <div class="login">
    <div class="main">
      <div class="left">
        <p>口碑矩阵</p>
        <span>商城后台管理系统</span>
      </div>
      <div class="right">
        <el-card class="login-form-layout">
          <h1>欢迎登录</h1>
          <el-form autocomplete="on" :model="loginForm" ref="loginForm" label-position="left">
            <el-form-item prop="phone" class="username">
              <el-input name="phone" oninput="value=value.replace(/[^\d]/g,'')" type="text" v-model="loginForm.phone" autocomplete="on" placeholder="请输入您的手机号" class="phoneinfo" style="height: 62px!important;">
                <span slot="prefix">
                  <svg-icon icon-class="user" class="color-main"></svg-icon>
                </span>
                <i class="el-icon-delete"></i>
              </el-input>
            </el-form-item>
            <div class="yzm">
              <el-form-item prop="code" class="password">
                <el-input name="code" type="text" @keyup.enter.native="handleLogin" v-model="loginForm.code" autocomplete="on" placeholder="请输入验证码" id="code">
                  <span slot="prefix">
                    <svg-icon icon-class="password" class="color-main"></svg-icon>
                  </span>
                </el-input>
              </el-form-item>
              <button type="primary" class="sendcode" :disabled="isDisabled" @click.enter.prevent="sendCode" v-if="!yzmstyle">{{buttonText}}</button>
              <button type="primary" class="sendcode" :disabled="isDisabled" @click="sendCode" v-if="yzmstyle">{{buttonText}}</button>
            </div>
            <el-form-item style="margin-bottom: 60px">
              <el-button style="width: 100%" type="primary" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { isvalidUsername } from "@/utils/validate";
import { setSupport, getSupport, SupportUrl } from "@/utils/support";
import { crmLoginSendSms, login } from "@/api/login";
// import login_center_bg from '@/assets/images/login_center_bg.png'
export default {
  name: "login",
  data() {
    // const validateUsername = (rule, value, callback) => {
    //   if (!isvalidUsername(value)) {
    //     callback(new Error("请输入正确的用户名"));
    //   } else {
    //     callback();
    //   }
    // };
    // const validatePass = (rule, value, callback) => {
    //   if (value.length < 3) {
    //     callback(new Error("密码不能小于3位"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      loginForm: {
        phone: "",
        code: ""
      },
      // loginForm: {
      //   username: "admin",
      //   password: "123456"
      // },
      style: false,
      yzmstyle: false,
      buttonText: "发送验证码",
      isDisabled: false, // 是否禁止点击发送验证码按钮
      flag: true,
      loading: false,
      dialogVisible: false
    };
  },
  methods: {
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    // 验证手机号
    checkMobile(str) {
      let re = /^1\d{10}$/;
      if (re.test(str)) {
        return true;
      } else {
        return false;
      }
    },
    sendCode() {
      let tel = this.loginForm.phone;
      if (this.checkMobile(tel)) {
        let time = 60;
        this.buttonText = "已发送";
        this.isDisabled = true;
        if (this.flag) {
          this.flag = false;
          let timer = setInterval(() => {
            time--;
            this.buttonText = time + " 秒";
            if (time === 0) {
              clearInterval(timer);
              this.buttonText = "重新获取";
              this.isDisabled = false;
              this.flag = true;
            }
          }, 1000);
        }
      } else if (tel == "") {
        this.$toast("手机号不能为空");
      } else {
        this.$toast("请填写正确的手机格式");
      }
      let params = new URLSearchParams();
      params.append("phone", this.loginForm.phone);
      crmLoginSendSms(params);
    },
    handleLogin() {
      const data = {
        phone: this.loginForm.phone,
        code: this.loginForm.code
      };
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // let isSupport = getSupport();
          // if (isSupport === undefined || isSupport == null) {
          //   this.dialogVisible = true;
          //   return;
          // }
          this.loading = true;

          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.loading = false;
              this.$router.push({ path: "/" });
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("参数验证不合法！");
          return false;
        }
      });
    },
    dialogConfirm() {
      this.dialogVisible = false;
      setSupport(true);
      window.location.href = SupportUrl;
    },
    dialogCancel() {
      this.dialogVisible = false;
      setSupport(false);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

.login {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  .main {
    width: 740px;
    height: 400px;
    margin: 145px auto 0;
    background: #fff;
    display: flex;
    .left {
      width: 300px;
      height: 400px;
      background: #ccc;
      padding-top: 40px;
      box-sizing: border-box;
      p {
        font-size: 32px;
        text-align: center;
        font-size: #6a6a6a;
      }
      span {
        font-size: 18px;
        text-align: center;
        display: block;
      }
    }
    .right {
      width: 440px;
      .el-card {
        border: 0 !important;
        background: #f1f1f1;
        box-shadow: none !important;
        border-radius: 0px;
        height: 400px !important;
        .el-card__body {
          h1 {
            text-align: center;
            font-size: 28px;
            padding-top: 20px;
            box-sizing: border-box;
          }
          .yzm {
            display: flex;
            height: 62px;
            margin-bottom: 40px;
            justify-content: space-between;
            .sendcode {
              width: 113px;
              height: 40px;
              border: none;
            }
          }
          .username,
          .password {
            height: 62px;
            .phoneinfo {
              height: 62px;
            }
            .el-form-item__content {
              height: 62px !important;
              input[name="username"] {
                height: 62px !important;
              }
              .el-input__inner {
                height: 62px !important;
                font-size: 14px;
              }
            }
          }
          .el-button--primary {
            height: 48px;
            line-height: 48px;
            padding: 0 !important;
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
